<template>
  <div id="adBox">
    <!-- 头部 -->
    <ad-header @search="search" />
    <!-- 表格 -->
    <cs-card>
      <el-table
        ref="multipleTable"
        :data="adTableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @filter-change="typeFilterTag"
        class="contentTable_G"
        v-loading="loading"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="owner" label="广告主" width="260">
        </el-table-column>
        <el-table-column prop="name" label="广告名称" width="160">
        </el-table-column>
        <el-table-column label="投放小区" width="320">
          <template v-slot="{ row }">
            {{ filterCommunity(row.community) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sendType.name"
          label="投放类型"
          width="180"
          :filters="typeFilters"
          column-key="sendTypes"
        >
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"> </el-table-column>
        <el-table-column label="投放时间段" width="160">
          <template v-slot="{ row }">
            {{ row.fromDate }} - {{ row.toDate }}
          </template>
        </el-table-column>
        <el-table-column prop="visitNumber" label="浏览量" width="180">
        </el-table-column>
        <el-table-column
          label="状态"
          width="120"
          :filters="statusFilters"
          column-key="status"
          :filter-multiple="false"
        >
          <template v-slot="scoped">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              :disabled="isAdStatusDisabled"
              v-model="scoped.row.status"
              active-color="#006EFF"
              inactive-color="#DDDDDD"
              class="switchStyle_G"
              @change="changeAdStatus(scoped.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template v-slot="{ row }">
            <el-link
              type="primary"
              class="el-linkRightMargin_G"
              @click="adDetailLinkClick(row.id)"
              >详情
            </el-link>
            <el-link
              type="primary"
              class="el-linkRightMargin_G"
              @click="alterAdLinkClick(row.id)"
              >修改
            </el-link>
            <el-link type="primary" @click="deleteAdLinkClick(row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <div id="pagination_section_G">
        <span class="currentSelect_G">{{ `共${totalCount}项` }}</span>
        <div class="pagination_right_G">
          <span>{{ `${pageSize}条/页` }}</span>
          <cs-pagination
            :currentPage="currentPage"
            :totalPage="totalPage"
            @firstPageClick="firstPageClick"
            @previousPageClick="previousPageClick"
            @nextPageClick="nextPageClick"
            @lastPageClick="lastPageClick"
            @junkToOtherPage="junkToOtherPage"
          />
        </div>
      </div>
    </cs-card>
    <!-- 删除对话框 -->
    <el-dialog
      title="删除广告"
      :visible.sync="isShowDeleteDialog"
      width="681px"
      class="dialogTitle_G"
      @close="close"
    >
      <div
        class="deleteTip1_G"
        v-html="msg1 + this.deleteId.length + msg2"
      ></div>
      <div class="deleteTip2_G">确定<b>删除</b>选中的广告？</div>
      <div class="dialog-footer_G">
        <cs-btn
          type="primary"
          @click.native="confirmBtnClick"
          btnText="确定"
          :buttonStatus="buttonStatus"
        />
        <cs-btn @click.native="isShowDeleteDialog = false" btnText="取消" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AdHeader from "./cpns/AdHeader.vue";
import CsCard from "@/components/CsCard/CsCard.vue";
import CsPagination from "@/components/CsPagination/CsPagination.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";

import { getAdTableData, delAdvertById, updateAdvertStatus } from "@/api/ad";

export default {
  name: "Ad",
  components: {
    AdHeader,
    CsCard,
    CsPagination,
    CsBtn,
  },
  created() {
    this.getAdTableData();
  },
  data() {
    return {
      queryInfo: {
        limit: 10,
        offset: 1,
        sendTypes: "",
        status: "",
      },
      adTableData: [],
      typeFilters: [
        { text: "banner轮播投放", value: "1" },
        { text: "图文文章投放", value: "2" },
        { text: "弹窗广告投放", value: "3" },
      ],
      statusFilters: [
        { text: "开启", value: 1 },
        { text: "关闭", value: 0 },
      ],
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
      isAdStatusDisabled: false,
      // 弹窗
      isShowDeleteDialog: false,
      msg1: "您已选择<b>",
      msg2: "个</b>广告",
      deleteId: [],
      buttonStatus: false,
      loading: false,
    };
  },
  methods: {
    async getAdTableData() {
      this.loading = true;
      const { data, code, msg } = await getAdTableData({
        ...this.queryInfo,
      });
      // console.log('获取广告', data, msg)
      if (code === 0) {
        this.currentPage = data.currPage;
        this.pageSize = data.pageSize;
        this.totalCount = data.totalCount;
        this.totalPage = data.totalPage;
        this.adTableData = data.list;
      } else {
        return this.$message.error(msg);
      }
      this.loading = false;
    },
    adDetailLinkClick(id) {
      this.$router.push(`/addetailbyid/${id}/readonly`);
    },
    alterAdLinkClick(id) {
      this.$router.push(`/addetailbyid/${id}/edit`);
    },
    statusFilterTag(value, row, column) {
      // console.log({ value, row, column });
      // return row.status === value;
    },
    // typeFilterTag(value, row, column) {
    //   // console.log({ value, row, column });
    //   // return row.sendType.value === value;
    // },
    // 删除广告链接点击事件
    deleteAdLinkClick({ id }) {
      this.isShowDeleteDialog = true;
      this.deleteId = [id];
    },
    close() {
      this.isShowDeleteDialog = false;
    },
    async confirmBtnClick() {
      // console.log('确认删除', this.deleteId)
      this.buttonStatus = true;
      const res = await delAdvertById(this.deleteId);
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      } else {
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }
      await this.getAdTableData();
      this.deleteId = "";
      this.isShowDeleteDialog = false;
      this.buttonStatus = false;
      // console.log('删除结构', res)
    },
    filterCommunity(row) {
      if (row !== null) {
        return row.map((item) => item.name).join(",");
      } else {
        return "";
      }
    },
    // 改变状态
    async changeAdStatus({ id, status }) {
      this.isAdStatusDisabled = true;
      const data = {
        advertDetailId: id,
        status,
      };
      const res = await updateAdvertStatus(data);
      if (res.code === 0) {
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message.error("修改失败");
      }
      this.getAdTableData();
      this.isAdStatusDisabled = false;
    },
    // 标签筛选
    typeFilterTag(filters) {
      console.log(filters);
      if (filters.sendTypes) {
        this.queryInfo.sendTypes = filters.sendTypes;
      } else if (filters.status) {
        this.queryInfo.status = filters.status;
      }
      this.getAdTableData();
    },
    firstPageClick() {
      this.queryInfo.offset = 1;
      this.getAdTableData();
    },
    previousPageClick() {
      this.queryInfo.offset--;
      this.getAdTableData();
    },
    nextPageClick() {
      this.queryInfo.offset++;
      this.getAdTableData();
    },
    lastPageClick() {
      this.queryInfo.offset = this.totalPage;
      this.getAdTableData();
    },
    junkToOtherPage(pageNum) {
      this.queryInfo.offset = pageNum;
      this.getAdTableData();
    },
    search(info) {
      // console.log(info)
      for (const key in info) {
        console.log(key);
        this.queryInfo[key] = info[key];
      }
      this.getAdTableData(info);
    },
  },
};
</script>

<style lang="scss">
#adBox {
  margin: 26px;
}
</style>
